<template>
    <div class="common__color-F0F0F0">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">我的店铺</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
            <div slot="right"><img slot="icon" src="~assets/x3/ico/indexright.png"></div>
        </x-header>
        <group class="shop__top">
            <div class="vux-masker-box common__masker">
                <div class="vux-masker" style="background-color: rgba(0, 0, 0, 0.5);">
                    <div class="m-title shop__masker--title">
                        <div class="shop__masker--alert"><img slot="icon" class="shop__header--img" src="~assets/x3/ico/shop-header.png"></div>
                        <div class="shop__masker--shopname">李达的店铺</div>
                        <div class="shop__masker--introduce">店铺介绍 , 店主介绍 , 其他介绍</div>
                    </div>
                </div>
            </div>
            <div class="shop__info">
                <span class="shop__info--span"><img src="~assets/x3/ico/shop-header.png"> 成交量10单
                </span>
                <span class="shop__info--span"><img src="~assets/x3/ico/shop-header.png"> 人气30
                </span>
                <span class="shop__info--span"><img src="~assets/x3/ico/shop-header.png"> 点赞2
                </span>
            </div>
        </group>
        <group class="shop__list--group ">
            <grid :rows="2">
                <grid-item class="index__card--left">
                    <card>
                        <img slot="header" class="common__card--img" src="~assets/x3/162-115.png">
                        <div slot="content" class="card-padding">

                            <span class="common__card--leftspan">利宝车险</span>
                            <span class="common__card--rightspan">¥665起</span>
                            <p class="common__card--p">
                                千元以下立等可取 万元以下...
                            </p>
                        </div>
                    </card>
                </grid-item>
                <grid-item class="index__card--right">
                    <card>
                        <img slot="header" src="~assets/x3/162-115.png" class="common__card--img">
                        <div slot="content" class="card-padding">
                            <span class="common__card--leftspan">利宝车险</span>
                            <span class="common__card--rightspan">¥665起</span>
                            <p class="common__card--p">
                                千元以下立等可取 万元以下...
                            </p>
                        </div>

                    </card>
                </grid-item>
                <grid-item class="index__card--left">
                    <card>
                        <img slot="header" src="~assets/x3/162-115.png" class="common__card--img">
                        <div slot="content" class="card-padding">
                            <span class="common__card--leftspan">利宝车险</span>
                            <span class="common__card--rightspan">¥665起</span>
                            <p class="common__card--p">
                                千元以下立等可取 万元以下...
                            </p>
                        </div>
                    </card>
                </grid-item>
                <grid-item class="index__card--right">
                    <card>
                        <img slot="header" src="~assets/x3/162-115.png" class="common__card--img">
                        <div slot="content" class="card-padding">
                            <span class="common__card--leftspan">利宝车险</span>
                            <span class="common__card--rightspan">¥665起</span>
                            <p class="common__card--p">
                                千元以下立等可取 万元以下...
                            </p>
                        </div>
                    </card>
                </grid-item>
            </grid>
            <div class="common__footer shop__footer ">查看全部任务</div>
        </group>
    </div>
</template>
<script>
import { SwiperItem, XHeader, XButton, Masker, Cell, CellBox, CellFormPreview, Group, Badge, GroupTitle, Grid, GridItem, Card } from 'vux';
import { mapState, mapActions } from "vuex";
export default {
    components: { Card, Grid, GridItem, GroupTitle, XHeader, Masker, Group, Cell, CellFormPreview, CellBox, Badge, XButton, SwiperItem },
    computed: mapState({
        isWeChar: "isWeChar"
    }),
    methods: {
        goBack() {
            this.$common.goBack(this);
        }
    },
    mounted() {
        document.title = "我的店铺";
        let _this = this;
        this.$init.subPageInit(this);
    },
}
</script>


<style lang="scss">
.shop__masker--title {
  top: 0 !important;
  margin-top: 20%;
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.shop__masker--shopname {
  margin-bottom: 2%;
  font-size: 15px;
  color: #000;
}

.shop__masker--alert {
  margin-bottom: 2%;
  font-size: 13px;
}

.common__masker {
  border-radius: 2px;
  height: 180px;
}

.shop__header--img {
  width: 64px;
  height: 64px;
  border-radius: 100%;
}

.shop__masker--introduce {
  font-size: 13px;
  color: #808080;
}

.shop__top {
  margin-top: -4px;
}

.vux-masker {
  background-color: transparent !important;
}

.shop__info {
  padding: 12px 1%;
  border-top: 1px solid #f0f0f0;
  width: 100%;
}

.shop__info--span {
  font-size: 14px;
  text-align: center;
  width: 32%;
  vertical-align: middle;
  display: inline-block;
  img {
    vertical-align: middle;
    width: 22px;
    height: 22px;
  }
}

.color-white {
  background-color: #fff;
}

.weui-grid:before {
  border: 0px !important;
}

.weui-grids:before {
  border: 0px !important;
}

.weui-grid:after {
  border: 0px !important;
}

.shop__footer {
  background: #f2f2f2;
  margin-left: 5%;
  margin-right: 5%;
  width: 90% !important;
  padding: 8px 0px !important;
  margin-bottom: 20px;
}

.weui-cells:after {
  border: 0px !important;
}

.shop__list--group {
  padding-bottom: 20px;
}
</style>




